<!-- v-if v-show 源码 -->

<!-- <!DOCTYPE html>
<html>

<body>
  <div v-if="1+1=== 2" htmll="123">我要显示</div>
  <div v-if="1+1!==2" htmll="123">我不能显示</div>
  <div v-else-if="1+2===3">
    我也能显示
  </div>
  <div v-else-if="false">
    我也不能显示
  </div>
  <div v-show="true">我是show显示</div>
  <div v-show="false">我是show隐藏</div>

  <script>
    // 获取根元素
    const el = document.querySelector('body')
    // 获取子节点
    const nodeList = el.childNodes

    // 遍历子节点
    for (let i = 0; i < nodeList.length; i++) {
      const childNode = nodeList[i]

      // 判断子元素是否含有v-if、v-else-if、v-show属性
      const has = hasIf(childNode)
      // 如果存在v-if、v-else-if、v-show属性，则执行响应操作
      if (has) {
        // 根据v-if、v-else-if、v-show的值操作相应元素
        operateNode(childNode, has)
      }

    }

    // 删除节点
    function operateNode(el, attr) {
      // 获取v-if、v-else-if、v-show的值
      const attrValue = el.attributes.getNamedItem(attr) ? 		      el.attributes.getNamedItem(attr).value : null

      // 执行v-if、v-else-if、v-show表达式
      const fun = new Function('', 'return (' + attrValue + ')')
      const res = fun()
      // v-if、v-else-if、v-show的值为真时正常显示
      if (res) return
      // 非v-show指令时采用删除子节点的方式进行操作
      attr !== 'v-show' && el.parentNode && el.parentNode.removeChild(el)
      // v-show指令时通过设置display的值控制显隐
      attr === 'v-show' && (el.style.display = 'none')

    }

    // 判断是否含有v-if、v-else-if、v-show属性
    function hasIf(el) {
      // 子元素没有属性时直接返回
      if (!el.attributes) return
      const e = el.attributes

      for (let i = 0; i < e.length; i++) {
        // 通过正则匹配v-if、v-else-if、v-show指令
        if (/^v\-if|v\-else\-if|v\-show$/.test(e[i].name)) {
          return e[i].name
        }
      }
    }


  </script>
</body>

</html> -->


<!-- 触底加载 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      margin: 0;
      padding: 0;
    }
      .box{
          width: 500px;
          height: calc(100vh - 40px);
          /* height: 3000px; */
          margin: 0 auto;
          padding: 20px;
          background-color: antiquewhite;
      }
      /* 整个滚动条 */
      ::-webkit-scrollbar {
          /* 对应纵向滚动条的宽度 */
          width: 10px;
          /* 对应横向滚动条的宽度 */
          height: 10px;
      }

      /* 滚动条上的滚动滑块 */
      ::-webkit-scrollbar-thumb {
          background-color: #49b1f5;
          border-radius: 32px;
      }
      
      /* 滚动条轨道 */
      ::-webkit-scrollbar-track {
          background-color: #dbeffd;
          /* border-radius: 32px; */
      }
      .innerbox {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        background-color: #f00;
        overflow-y: scroll;
      }
      .innerUl {
        height: 320px;
        overflow: hidden;
      }
  </style>
</head>
<body>
  <div class="box">
    <div class="innerbox">
      <ul class="innerUl">
        div*3>lorem5
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
        <li>名字：</li>
      </ul>
    </div>
  </div>
</body>
<script>

// 测试回掉函数和同步编程
// setTimeout(() => {
//   console.log('同步函数');
// }, 1000);
fun = () => {
  console.log('回调函数');
}

setTimeout(fun, 1000);
// 单个dom 触底加载
const targetDiv = document.querySelector('.innerbox');
const innerUl = document.querySelector('.innerUl');
targetDiv.addEventListener('scroll', function(e) {
  // console.log);  
console.log(targetDiv.clientHeight,targetDiv.scrollTop);
if (targetDiv.scrollTop+targetDiv.clientHeight >= innerUl.clientHeight) {
  console.log('触底了');
}
});
// 浏览器触底加载功能的实现
/* 1.视口的高度+页面被卷去的高度=滚动条的长度 */
window.addEventListener("scroll",function(){
    //页面被卷去的高度: window.scrollY 
    //页面被卷去的高度: window.pageYOffset
    //页面被卷去的高度: document.documentElement.scrollTop
    // console.log("页面被卷去的高度:",window.scrollY,window.pageYOffset,document.documentElement.scrollTop);
    
    // body页面的滚动条高度: document.body.scrollHeight
    // 整个页面你的滚动条高度: document.documentElement.scrollHeight
    // console.log(document.body.scrollHeight,document.documentElement.scrollHeight);

    // 可视页面的高度: document.documentElement.clientHeight
  // console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight,window.pageYOffset);
  // console.log(document.documentElement.clientHeight+window.scrollY + 1 > document.documentElement.scrollHeight);
  if(document.documentElement.clientHeight+window.scrollY + 1 > document.documentElement.scrollHeight){
      console.log("触底了!!!!");
  }

})

</script>
</html>
